<template>
  <div class="container">
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">消息列表</p>
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab title="未读消息">
        <msg-bar :is-read="false" :msg="item" v-for="(item,index) in message" :key="index"></msg-bar>
        <van-empty image="search" v-if="!message||!message.length" description="没有未读信息"></van-empty>
      </van-tab>
      <van-tab title="已读消息">
        <msg-bar :is-read="true" :msg="item" v-for="(item,index) in message" :key="index"></msg-bar>
        <van-empty image="search" v-if="!message||!message.length" description="没有已读信息"></van-empty>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { requestReadList, requestUnReadList } from '../../api/msg'
import MsgBar from '../../components/msg/MsgBar'

export default {
  name: 'MessageList',
  data () {
    return {
      active: 0,
      message: []
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    back () {
      this.$router.back()
    },
    loadData () {
      if (!this.active) {
        requestUnReadList().then(res => {
          this.message = res.data
        })
      } else {
        requestReadList().then(res => {
          this.message = res.data
        })
      }
    }
  },
  watch: {
    active () {
      this.loadData()
    }
  },
  components: {
    MsgBar
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
}
</style>
